<template>
  <div>
    <div v-loading="g_loading" style="margin-top:50px;width: calc(100% - 10px);height:calc(100vh - 140px);">
      <SeeksRelationGraph ref="seeksRelationGraph" :options="graphOptions" :on-node-click="onNodeClick" />
    </div>
  </div>
</template>

<script>
import SeeksRelationGraph from 'relation-graph'
var nodeData = {
        "rootId": "1",
        "nodes":  [
  { id: '1', text: '客户标签体系' }, 
  { id: '2', text: '组织客户' },     
  { id: '4', text: '基础属性' },     
  { id: '5', text: '组织属性' },     
  { id: '6', text: '企业属性' },     
  { id: '7', text: '企业性质' },     
  { id: '10', text: '企业规模' },    
  { id: '11', text: '资源集约类型' },
  { id: '12', text: '法人类型' },    
  { id: '13', text: '经营信息' },    
  { id: '14', text: '成立时间' },    
  { id: '15', text: '主营业务' },    
  { id: '16', text: '市场区域' },    
  { id: '17', text: '经营情况优' },  
  { id: '18', text: '经营情况良' },  
  { id: '8', text: '家庭属性' },     
  { id: '9', text: '位置信息' },     
  { id: '21', text: '行为特征' },    
  { id: '3', text: '自然人客户' },   
  { id: '30', text: '基础属性' },
  { id: '31', text: '个人属性' },
  { id: '32', text: '性别' },
  { id: '33', text: '年龄' },
  { id: '34', text: '身体状况' },
  { id: '35', text: '行为特征' },
  { id: '37', text: '客户评估' }
],
        "links":   [
  { from: '1', to: '2' },   { from: '1', to: '3' },
  { from: '2', to: '4' },   { from: '2', to: '21' },
  { from: '4', to: '5' },   { from: '4', to: '9' },
  { from: '5', to: '6' },   { from: '5', to: '8' },
  { from: '6', to: '7' },   { from: '6', to: '10' },
  { from: '6', to: '11' },  { from: '6', to: '12' },
  { from: '6', to: '13' },  { from: '13', to: '14' },
  { from: '13', to: '15' }, { from: '13', to: '16' },
  { from: '13', to: '17' }, { from: '13', to: '18' },
  { from: '3', to: '30' },  { from: '3', to: '35' },
  { from: '3', to: '37' },  { from: '30', to: '31' },
  { from: '31', to: '32' }, { from: '31', to: '33' },
  { from: '31', to: '34' }
]
        }
export default {
  name: 'SeeksRelationGraphDemo',
  components: { SeeksRelationGraph },
  data() {
    return {
      demoname: '---',
      graphOptions: {
        "layouts": [
            {
            "label": "中心",
            "layoutName": "tree",
            "layoutClassName": "seeks-layout-center",
            "defaultJunctionPoint": "border",
            "defaultNodeShape": 0,
            "defaultLineShape": 1,
            "from": "left",
            "min_per_width": "400",
            "max_per_width": "400",
            "min_per_height": "100",
            "max_per_height": "150",
            // "centerOffset_y": "-200",
            'levelDistance': '300,300,300,300,300,300,300,300'
            }
        ],
        "defaultLineMarker": {
            "markerWidth": 12,
            "markerHeight": 12,
            "refX": 6,
            "refY": 6,
            "data": "M2,2 L10,6 L2,10 L6,6 L2,2"
        },
        "allowShowMiniNameFilter": true,
        "allowShowMiniToolBar": true,
        "defaultNodeShape": 1,
        "defaultJunctionPoint": "lr",
        "defaultLineShape": 4,
        "defaultNodeWidth": "137",
        "defaultNodeHeight": "36",
        "defaultExpandHolderPosition": "right"
        } 
    }
  },
  created() {
  },
  mounted() {
    this.demoname = this.$route.params.demoname
    this.setGraphData()
  },
  methods: {
    setGraphData() {
      var __graph_json_data = nodeData
        // 以上数据中的node和link可以参考"Node节点"和"Link关系"中的参数进行配置 
       this.$refs.seeksRelationGraph.setJsonData(__graph_json_data, (seeksRGGraph) => {

       })
    },
    onNodeClick (nodeObject, $event) {
      console.log(nodeObject.id,nodeObject.text);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>